<template>
	<view class="app app-bg">
		<view class="box">
			<text class="label">姓名</text>
			<u-input
				placeholder="请输入"
				input-align="right"
				v-if="status === 3"
				v-model="name"
				type="text"
			/>
			<text class="text" v-else>{{ name }}</text>
		</view>
		<view class="box">
			<text class="label">身份证</text>
			<u-input
				placeholder="请输入"
				input-align="right"
				v-if="status === 3"
				v-model="card"
				type="text"
			/>
			<text class="text" v-else>{{ card }}</text>
		</view>
		<view class="box">
			<text class="label">性别</text>
			<block v-if="status === 3">
				<u-input
					placeholder="请选择"
					input-align="right"
					v-model="sex"
					type="select"
					@tap="show2 = true"
				/>
				<u-select
					v-model="show2"
					:list="list2"
					@confirm="confirm($event, 'sex')"
				></u-select>
			</block>
			<text class="text" v-else>{{ sex }}</text>
		</view>
		<view class="box">
			<text class="label">年龄</text>
			<block v-if="status === 3">
				<u-input
					placeholder="请选择"
					input-align="right"
					v-model="age"
					type="select"
					@tap="show = true"
				/>
				<u-select
					v-model="show"
					:list="list"
					@confirm="confirm($event, 'age')"
				></u-select>
			</block>
			<text class="text" v-else>{{ age }}</text>
		</view>
		<view class="box">
			<text class="label">入驻城市</text>
			<vk-data-input-address
				confirm-color="var(--main)"
				placeholder="请选择城市"
				input-align="right"
				v-if="status === 3"
				title="请选择城市"
				style="flex: 1"
				v-model="city"
				ref="address"
				:level="2"
			></vk-data-input-address>
			<text class="text" v-else>{{ city }}</text>
		</view>
		<view class="box">
			<text class="label">入驻分类</text>
			<u-input
				placeholder="请选择"
				input-align="right"
				v-if="status === 3"
				v-model="catesText"
				type="select"
				@tap="jumpCate"
			/>
			<text class="text" v-else>{{ catesText }}</text>
		</view>
		<view class="box upd">
			<text class="label">照片</text>
			<image
				class="card"
				:src="photo ? photo : require('@/static/icon/photo-bg.png')"
				@tap="chooseImage"
			></image>
		</view>
		<block v-if="status === 3">
			<view class="check" @click="flag = !flag">
				<checkbox active-color="#737373" shape="circle" :checked="flag" />
				<text>我已认真阅读并同意</text>
				<text class="text" @tap.stop="vk.navigateTo('/pages/login/agreement?type=PTRZ')">
					《平台入驻协议》
				</text>
			</view>
			<view class="btn" @tap="send">申请入驻</view>
		</block>
		<view v-else-if="status === 0 || status === 2" class="status_box">
			<image class="icon" src="@/static/icon/icon_wait.png"></image>
			<text>审核中......</text>
		</view>
		<view v-else-if="status === 1" class="status_box suss">
			<image class="icon" src="@/static/icon/icon_suss.png"></image>
			<text>审核通过！</text>
		</view>
		<block v-else-if="status === -1">
			<view class="status_box danger">
				<image class="icon" src="@/static/icon/icon_fail.png"></image>
				<text>审核拒绝！</text>
			</view>
			<view class="status_box danger_bottom">失败原因：{{ content }}</view>
			<view class="btn" @tap="restart">重新编辑</view>
		</block>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖
import arr from "./arr.js"

export default {
	data() {
		return {
			name: "",
			card: "",
			sex: null,
			age: null,
			city: null,
			photo: "",
			cates: [],
			flag: false,
			content: "",
			// 选项
			list: arr,
			list2: [
				{ value: "男", label: "男" },
				{ value: "女", label: "女" }
			],
			list3: [
				{ _id: 1, name: "上门按摩" },
				{ _id: 2, name: "助娱向导" }
			],
			catesText: "",
			status: 3,

			show: false,
			show2: false
		}
	},
	onLoad() {
		this.init()
	},
	methods: {
		// 初始化
		init() {
			vk.callFunction({
				url: "client/user.queryForShifu",
				title: "获取中..."
			}).then(res => {
				if (!res.info) return
				this.name = res.info.name
				this.card = res.info.card
				this.sex = res.info.sex
				this.age = res.info.age
				this.city = res.info.city
				this.photo = res.info.photo
				this.status = res.info.status
				this.content = res.info.content
				if (res.info.cates) {
					this.cates = res.info.cates
					let list = []
					this.list3.map(item => {
						if (this.cates.findIndex(data => data == item._id) >= 0) {
							list.push(item.name)
						}
					})
					this.catesText = list.join("、")
				}
			})
		},
		// 选择
		confirm(e, type) {
			this[type] = e[0].value
		},
		jumpCate() {
			if (this.status !== 3) return
			vk.navigateTo({
				url: "./work-type",
				events: {
					getType: data => {
						this.catesText = data.map(item => item.name).join("、")
						this.cates = data.map(item => item._id)
					}
				},
				success: res => {
					res.eventChannel.emit("sendTypeList", this.cates)
				}
			})
		},
		// 选择图片
		chooseImage() {
			if (this.status !== 3) return
			uni.chooseImage({
				count: 1,
				sourceType: ["album"],
				success: res => {
					vk.uploadFile({
						title: "上传中...",
						filePath: res.tempFilePaths[0],
						suffix: "png",
						provider: "unicloud",
						success: res => {
							this.photo = res.url
						}
					})
				}
			})
		},
		// 申请入驻
		send() {
			const { name, card, sex, age, city, photo, flag, cates } = this
			if (!flag) return vk.toast("请先同意平台入驻协议")
			if (vk.pubfn.isNull(name)) return vk.toast("请输入姓名")
			if (vk.pubfn.isNull(card)) return vk.toast("请输入身份证号")
			if (vk.pubfn.isNull(sex)) return vk.toast("请选择性别")
			if (vk.pubfn.isNull(age)) return vk.toast("请选择年龄")
			if (vk.pubfn.isNull(city)) return vk.toast("请选择入驻城市")
			if (!cates.length) return vk.toast("请选择入驻分类")
			if (vk.pubfn.isNull(photo)) return vk.toast("请上传照片")

			vk.callFunction({
				url: "client/user.moveReidForShifu",
				title: "提交中...",
				data: { name, card, sex, age, city, photo, cates }
			}).then(res => {
				vk.toast("提交成功")
				this.city = res.city
				this.status = 0
			})
		},
		// 重新编辑
		restart() {
			this.city = null
			this.status = 3
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	padding: 20rpx;
}

.box {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 16rpx 20rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;

	.label {
		font-weight: bold;
	}

	.text {
		flex: 1;
		text-align: right;
		padding: 16rpx 0;
	}
}

.upd {
	flex-wrap: wrap;
	padding: 30rpx 20rpx;

	.label {
		width: 100%;
	}

	.card {
		width: 160rpx;
		height: 160rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
}

.check {
	padding: 22rpx 0 240rpx 0;
	display: flex;
	align-items: center;

	.text {
		color: #24c388;
	}

	/deep/ .uni-checkbox-wrapper {
		transform: scale(0.7);
		margin-top: -6rpx;
	}
}

.btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	background-color: #24c388;
	color: #ffffff;
	font-size: 28rpx;
}

.status_box {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 36rpx 0;
	color: #67c2ff;
	font-weight: bold;
	margin-top: 68rpx;

	.icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 14rpx;
	}
}

.suss {
	color: #23b453;
}

.danger {
	border-radius: 20rpx 20rpx 0 0;
	padding: 36rpx 0 16rpx;
	color: #fa3534;
}

.danger_bottom {
	margin: 0 0 40rpx;
	border-radius: 0 0 20rpx 20rpx;
	padding: 0 0 36rpx;
	font-size: 24rpx;
	font-weight: 400;
	line-height: 33rpx;
	color: #999999;
}
</style>
